<template>
    <div class="form-date">

        <!--S时间日期-->
        <div id="date-input" @click="showSelector">
            <cube-input
                    v-model="date_format"
                    :placeholder="placeholder"
            >
            </cube-input>
        </div>
        <!--E时间日期-->

    </div>
</template>

<script>
export default {
    name: "form-date",
    data() {
      return {
          date_format: ''
      }
    },
    model: {
      prop: 'value',
      event: 'select'
    },
    props: {
        // 值
        value: {
           default:0
        },
        // 占位符
        placeholder: {
            type: String,
            default: ''
        }
    },
    watch: {
        value() {
            if(this.value) {
                this.date_format = this.timestampToTime(this.value * 1000)
            }
        }
    },
    mounted() {
        this.date_format = this.timestampToTime(this.value * 1000)
    },
    computed: {
        /**
         * 选择器value值
         */
        selector_value() {
            if(this.value === 0 || this.value === '') {
                return new Date()
            } else {
                return new Date(this.value * 1000)
            }
        }
    },
    methods: {
        /**
         *创建选择器
         */
        showSelector() {
            this.$createDatePicker({
                title: '选择时间',
                min: new Date(2021, 2, 1),
                max: new Date(2030, 12, 30),
                zIndex: 2000,
                value: this.selector_value,
                onSelect: (res) => {
                    this.$emit("select", res.getTime() / 1000)
                }
            }).show()
        },
        // 时间戳转换时间格式化
        timestampToTime(timestamp) {
            let time = new Date(timestamp)
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let date = time.getDate()
            if (month < 10) { month = '0' + month }
            if (date < 10) { date = '0' + date }
            return year + '-' + month + '-' + date
        }
    }
}
</script>

<style scoped lang="less">
#date-input{
    position: relative;
    &::before{
        content: "";
        display: block;
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background:rgba(0, 0, 0, 0);
    }
}
</style>
